<template>
  <div class="login-container" >
    <!--登录框-->
    <div class="login-box">
      <!--logo-->
      <div class="logo-box">
        <img src="../assets/logo.png">
      </div>
      <!--登录表单-->
      <el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef" class="login-form">
        <!--用户名-->
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" prefix-icon="el-icon-user" placeholder="请输入学号/工号"></el-input>
        </el-form-item>
        <!--密码-->
        <el-form-item prop="password" >
          <el-input 
            v-model="loginForm.password" 
            type="password" 
            prefix-icon="el-icon-lock" 
            placeholder="请输入密码"
          >
          </el-input>
        </el-form-item>
        <!--验证码-->
        <el-form-item prop="code">
          <el-input style="width: 70%;"
            v-model="loginForm.code"
            @keyup.enter.native="loginSubmit"
            type="code"
            prefix-icon="el-icon-s-check"
            placeholder="请输入验证码"
          ></el-input>
          <Verification class="code" ref="verification"></Verification>
        </el-form-item>
        <!--按钮区域-->
        <el-form-item class="login-btns">
          <el-button type="primary" @click="loginSubmit">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <BaseFooter />
  </div>
</template>

<script>
  import Verification from './Verification.vue'
  import BaseFooter from './BaseFooter.vue'
  import {login} from '../axios/login'
  export default {
    name:'Login',
    components:{Verification, BaseFooter},
    data(){
      return {
        // 登录表单的数据
        loginForm: {
          username: '',
          password: '',
          code:''
        },
        // 登录表单的规则
        loginFormRules: {
          username: [ { required: true, message: '学号/工号不能为空', trigger: 'blur' } ],
          password: [ { required: true, message: '密码不能为空', trigger: 'blur' } ],
          code: [ {required:true, message:'验证码不能为空', trigger: 'blur'} ]
        }
      }
    },
    methods:{
      //登录点击事件
      loginSubmit(){
        const { username, password, code } = this.loginForm;
        let crlf = this.$refs.verification.pachcode.toLowerCase();
        if (crlf !== code.toLowerCase()) { 
          this.$message.error('验证码错误')
          return;
        }
        if(username === '' || password === ''){
          this.$message.error('请填写完整的用户信息')
          return;
        }
        // console.log("loginSubmit-------,"+ username + " ---" + password) 
        // 登录逻辑---有后端
        login(username, password).then(res => { 
          if (res.success){ 
            window.sessionStorage.setItem("token", res.data.token) // 保存 token 
            window.sessionStorage.setItem("username", username) 
            // 根据用户的身份标识，选择不同的路由
            if(res.data.identity === 1){
              this.$router.push({ path: "/students/notices" });
            } else if (res.data.identity === 2) {
              this.$router.push({ path: "/teacher/notices" });
            } else if (res.data.identity === 3){
              this.$router.push({ path: "/leader/notices" });
            } else {
              this.$router.push({ path: "/admin/notices" });
            }
            this.$message.success('登录成功'); 
          }  
        }) 
        // 无后端，造假数据：保存 token
        // window.sessionStorage.setItem("token", 'token'); 
        // 根据用户类型跳转
        // this.$router.push({ path: "/students" });
        // this.$router.push({ path: "/teacher" });
        // this.$router.push({ path: "/leader" });
        // this.$router.push({ path: "/admin" });
        // this.$message.success('登录成功'); 
      },
      resetLoginForm(){
        // 清空登录框中的所有内容
        this.$refs.loginFormRef.resetFields() 
      }
    }
  }
</script>

<style lang="less">  
  .login-container { 
    @url: '../assets';
    background-image: url('@{url}/back.jpg');
    background-color: steelblue; 
    height: 100%;
  }
  .login-box {
    width: 450px;
    height: 350px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .logo-box {
      width: 130px;
      height: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      padding: 10px;
      box-shadow: 0 0 10px #ddd;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }
    .login-form {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
    }
    .login-btns {
      display: flex;
      justify-content: flex-end;
    }
    .code {
      float: right;
      margin-left: 20px;
    }
  }
</style>